<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="http://cdn.suoluomei.com/common/js2.0/axios/axios.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
    <!-- <meta name="divport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<style>
    #Vue {
        padding: 20px 28px;
        box-sizing: border-box;
        /* width: 100%; */
    }

    .container {
        width: 100%;
    }

    .form-group {
        /* height: 80px; */
        /* line-height: 80px; */
        /* font-size: 20px; */
        padding-left: 14px;

    }

    .control-label {
        display: block;
        font-size: 14px;
        font-weight: bold;
        color: rgba(119, 119, 119, 1);
        /* height: 50px;
        line-height: 50px;
        word-spacing: 20px; */
    }


    .grade-box {
        display: flex;
        display: -webkit-box;
        /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
        display: -moz-box;
        /* Firefox 17- */
        display: -webkit-flex;
        /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
        display: -moz-flex;
        /* Firefox 18+ */
        display: -ms-flexbox;
        /* IE 10 */
        height: 42px;
        /* line-height: 96px; */
        align-items: center;
    }

    .grade-box img {
        vertical-align: middle;
        width: 20px;
        height: 20px;
        margin: 0 0 0 12px;

    }

    .grade-box .stext {
        margin-left: 16px;
        font-size: 12px;
        font-weight: bold;
        color: #aaa;

    }

    .texta {
        padding: 10px 14px 0 14px;
        box-sizing: border-box;
    }

    .texta .control-label {
        font-size: 14px;
        font-weight: bold;
        color: rgba(119, 119, 119, 1);
        height: 50px;
        line-height: 50px;
        word-spacing: 20px;
        display: block;
        /* margin-bottom: 20px; */
    }

    .btn-content {
        text-align: center;
    }

    .btn {
        margin-top: 40px;
        height: 46px;
        line-height: 46rpx;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        background: #FF7200;
        border-radius: 0rpx;
        color: #fff;
        border: none;
    }

    .tittle {
        font-weight: 500;
        font-size: 16px;
        line-height: 60px;
        height: 60px;
        /* margin-bottom: 30px; */
    }

    textarea {
        width: 100%;
        height: 140px;
        /* height: 100%; */
        border: none;
        border-radius: 10px;
        resize: none;
        cursor: pointer;
        padding: 16px;
        font-size: 14px;
        background: rgba(242, 242, 242, 1);
        box-sizing: border-box;

    }

    input::-webkit-input-placeholder {
        color: rgba(119, 119, 119, 1);
        font-size: 14px !important;
    }

    /* 使用webkit内核的浏览器 */
    input:-moz-placeholder {
        color: rgba(119, 119, 119, 1);
        font-size: 14px !important;
    }

    /* Firefox版本4-18 */
    input::-moz-placeholder {
        color: rgba(119, 119, 119, 1);
        font-size: 14px !important;
    }

    /* Firefox版本19+ */
    input:-ms-input-placeholder {
        color: rgba(119, 119, 119, 1);
        font-size: 14px !important;
    }
</style>

<body>
    <div id="Vue">
        <div class="container">
            <div id="app" class="row">
                <div class="tittle">
                    <span>请对本次服务做出评价：</span>
                </div>
                <div class="form-group clearfix" v-for="(item,index) in starInfo" :key=index>
                    <div class="col-md-8">
                        <div class="grade-box">
                            <span class="control-label col-md-4">{{item.name}}</span>
                            <img class="starS" v-for="(star,starIndex) in item.stars" v-bind:src="star.src"
                                v-on:click="rating(index,starIndex,item.name)" alt="星星图片" />
                            <div class="stext">{{item.startext}}</div>
                        </div>
                    </div>
                </div>
                <div class="texta">
                    <label class="control-label col-md-4">问题反馈：</label>
                    <textarea name="" id="tarea" placeholder="请您对商品进行评价，感谢您的参与"></textarea>
                </div>
            </div>
            <div class="btn-content">
                <button class="btn" type="button" v-on:click='sub'>发布评论</button>
            </div>
        </div>



    </div>
    </div>
</body>
<script>
    var starOnImg = "http://lfwd.cloudsmicro.com:8080/img/appImg/images/pingjia/Stars_Lighten up.png";
    var starOffImg = "http://lfwd.cloudsmicro.com:8080/img/appImg/images/pingjia/Stars_Extinguish.png";
    new Vue({
        el: "#Vue",
        data: {
            starInfo: [{
                    name: '购物环境',
                    startext: '非常满意',
                    starNum: 5,
                    stars: [{
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        },
                        {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }
                    ],
                },
                {
                    name: '是否推荐',
                    startext: '非常满意',
                    starNum: 5,
                    stars: [{
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        },
                        {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }
                    ]
                },
                {
                    name: '服务水平',
                    startext: '非常满意',
                    starNum: 5,
                    stars: [{
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        },
                        {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }
                    ]
                },
                {
                    name: '产品质量',
                    startext: '非常满意',
                    starNum: 5,
                    stars: [{
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        },
                        {
                            src: starOnImg,
                            active: true
                        }, {
                            src: starOnImg,
                            active: true
                        }
                    ]
                },
            ],

            // startext: ['测死', '', '', ''],

        },
        methods: {

            //保存数据
            sub() {
                // http://lfwd.cloudsmicro.com/user/reviews.html?code=RE2010200000007&phone=17732141036&account=lfwd
                var description = $("#tarea").val();
                var rcode = this.GetQueryString("code");
                var icode = this.GetQueryString("phone");
                var account = this.GetQueryString("account");
                // var rcode = 'RE2010200000007';
                // var icode = '17732141036';
                // var account = 'lfwd';
                var score1 = this.starInfo[0].starNum
                var score2 = this.starInfo[1].starNum
                var score3 = this.starInfo[2].starNum
                var score4 = this.starInfo[3].starNum
                $.ajax({
                    "url": "http://lfwd.cloudsmicro.com/messageTemplate/reviews/",
                    "data": "rcode=" + rcode + "&icode=" + icode + "&score1=" +
                        score1 + "&score2=" +
                        score2 +
                        "&score3=" + score3 + "&score4=" + score4 + "&description=" + description +
                        "&account=" + account,
                    "type": "POST",
                    "dataType": "json",
                    "success": function (json) {
                        if (json.state == 200) {
                            // window.location.href =
                            //     "http://lfwd.cloudsmicro.com/user/reviews-ok.html";
                            window.location.replace(
                                "http://lfwd.cloudsmicro.com/user/reviews-ok.html");
                        } else {
                            alert(json.message)
                        }
                    }
                })

            },

            //获取数据
            getData: function (id) {},

            GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg); //search,查询？后面的参数，并匹配正则
                if (r != null) return unescape(r[2]);
                return null;
            },
            //评分
            rating: function (index, starIndex, value) { //index：操作的哪一个评分 starIndex ：操作的是那一颗星星
                // console.log(index, value)
                let data = this.starInfo[index] //当前操作的评分项数据
                var total = data.stars.length; //星星总数
                var idx = starIndex + 1; //这代表选的第idx颗星-也代表应该显示的星星数量
                //进入if说明页面为初始状态
                this.starClick(data, total, idx, index)

            },
            //点击星星
            starClick(data, total, idx, index) {
                // let data =this.starInfo[index] 
                if (data.starNum == 0) {
                    data.starNum = idx;
                    for (var i = 0; i < idx; i++) {
                        data.stars[i].src = starOnImg;
                        data.stars[i].active = true;
                    }
                } else {
                    //如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
                    if (idx == data.starNum) {
                        for (var i = index; i < total; i++) {
                            data.stars[i].src = starOffImg;
                            data.stars[i].active = false;
                        }
                    }
                    //如果小于当前最高星级，则直接保留当前星级
                    if (idx < data.starNum) {
                        for (var i = idx; i < data.starNum; i++) {
                            data.stars[i].src = starOffImg;
                            data.stars[i].active = false;
                        }
                    }
                    //如果大于当前星级，则直接选到该星级
                    if (idx > data.starNum) {
                        for (var i = 0; i < idx; i++) {
                            data.stars[i].src = starOnImg;
                            data.stars[i].active = true;
                        }
                    }

                    var count = 0; //计数器-统计当前有几颗星
                    for (var i = 0; i < total; i++) {
                        if (data.stars[i].active) {
                            count++;
                        }
                    }
                    data.starNum = count;
                    if (count == 1) {
                        data.startext = '非常不满意'
                    } else if (count == 2) {
                        data.startext = '不满意'
                    } else if (count == 3) {
                        data.startext = '一般'
                    } else if (count == 4) {
                        data.startext = '满意'
                    } else if (count == 5) {
                        data.startext = '非常满意'
                    }

                }
                this.starInfo[index] = data
            }



        },
        created() {


        },

    })
</script>

</html>